<template>
    <div style="text-align: center;">
        <el-card shadow="always" class="box-card">
            <p class="header-text">Cardinal</p>
            <el-form :model="inputForm" ref="inputFormRef" :rules="rules" status-icon label-width="80px">
                <el-form-item :label="$t('login.account')" prop="username">
                    <el-input type="text" v-model="inputForm.Name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label="$t('login.password')" prop="password">
                    <el-input type="password" v-model="inputForm.Password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onLogin()">{{$t('login.login')}}</el-button>
                    <el-button @click="reset()">{{$t('login.reset')}}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import utils from '@/utils.js'

const { proxy } = getCurrentInstance();
const { t } = useI18n()
const router = useRouter()
const inputFormRef = ref(null)
const rules = {
                    Name: [
                        {required: true, message: t('login.empty_account'), trigger: 'blur'},
                    ],
                    Password: [
                        {required: true, message: t('login.empty_password'), trigger: 'blur'}
                    ],
                }
const inputForm = reactive({
                    Name: '',
                    Password: ''
                })
function onLogin() {
                inputFormRef.value.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                });

                utils.POST('/manager/login', inputForm).then(res => {
                    localStorage.setItem('managerToken', res)
                    proxy.$message({
                        message: t('login.success'),
                        type: 'success'
                    });
                    router.push('/')
                }).catch(err => proxy.$message.error(err))
            }

function reset() {
                Object.assign(inputForm, {
                    Name: '',
                    Password: ''
                })
            }
</script>

<style scoped>
    .box-card {
        margin: 0 auto;
        width: 500px;
        text-align: center;
    }

    .header-text {
        font-size: 30px;
        font-weight: lighter;
    }
</style>